<template>
  <div style="margin-top: 5px;margin-bottom: 5px;margin-left: 10px" >
    <el-button type="primary" size="default" @click="refresh">刷新</el-button>
    <el-button type="primary" size="default" @click="addServer">添加</el-button>
  </div>
  <div style="margin: 5px;display: flex;flex-wrap: wrap" v-loading="loading">
    <el-card class="box-card" v-for="(server, index) in servers">
      <template #header>
        <div class="card-header">
          <span >{{ (index+1)+".  "+server.name  }}</span>
          <el-button type="danger" circle @click="seleteServer(server.name)">
            <el-icon :size="15">
              <Delete ></Delete>
            </el-icon>
          </el-button>
        </div>
      </template>
      <el-row justify="center" align="middle">
        <el-col :span="6" >
          <el-icon :size="20"  style="padding-top: 3px">
            <Platform ></Platform>
          </el-icon>
        </el-col>
        <el-col :span="18">
          <span class="card-content">{{ server.ip }}</span>
        </el-col>
      </el-row>
      <el-row  justify="center" align="middle">
        <el-col :span="6" >
          <el-icon :size="20"  style="padding-top: 3px">
            <SetUp ></SetUp>
          </el-icon>
        </el-col>
        <el-col :span="18">
          <span class="card-content" >{{ server.port }}</span>
        </el-col>
      </el-row>
    </el-card>
  </div>



  <el-dialog v-model="dialogFormVisible" title="添加消息服务" width="25%" draggable @closed="closedDialog()">
    <el-form ref="formrel" :rules="rules" :model="form">
      <el-form-item label="名称" :label-width="105" prop="name" >
        <el-input v-model="form.name" autocomplete="off" style=" width: 300px;" ></el-input>
      </el-form-item>
      <el-form-item label="MQ服务地址" required :label-width="105">
        <el-col :span="12">
          <el-form-item  prop="ip" >
            <el-input v-model="form.ip" autocomplete="off" style=" width: 185px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="text-align: center;">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="6">
          <el-form-item  prop="port">
            <el-input v-model="form.port" autocomplete="off" style=" width: 85px;"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog(false)">取消</el-button>
        <el-button type="primary" @click="closeDialog(true)"
        >添加</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {Platform,SetUp,Delete} from "@element-plus/icons-vue"

export default {
  name: "Setting",
  data(){
    return{
      servers:[],
      loading:true,
      dialogFormVisible:false,
      form:{
        name:"",
        ip:"",
        port:9876
      },
      rules:{
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          }
        ],
        ip: [
          {
            required: true,
            message: '请输入MQ的IP',
            trigger: 'blur',
          }
        ],
        port:[
          {
            required: true,
            message: '请输入MQ的端口',
            trigger: 'blur',
          }
        ]
      }
    }
  },
  components:{
    Platform,
    SetUp,
    Delete
  },
  methods:{
    loadServer(){
      this.loading=true
      this.$axios.get("/server/list").then( success=>{
          if(success.status=200 && success.data){
            this.servers=[]
            success.data.forEach((server)=> {
              this.servers.push({
                name:server.name,
                ip:server.ip,
                port:server.port
              })
            })
          }else{
            this.$message({
              message:"查询MQ服务地址失败!",
              type: "warning",
              duration:2000
            })
          }
        this.loading=false
        }
      ).catch(error=>{
          this.$message({
            message:"查询MQ服务地址失败!"+error.toString(),
            type: "error",
            duration:2000
          })
          this.loading=false
        }
      )
    },
    refresh(){
      this.loadServer()
    },
    addServer(){
      this.dialogFormVisible=true
    },
    saveServer(){
      this.$axios.post(
          "/server/add?name="+this.form.name+"&serverAddr="+this.form.ip+":"+this.form.port,
      ).then((success)=>{
            if(success.status==200 && success.data){
              this.$message({
                message:"保存服务成功!",
                type: "success",
                duration:2000
              })
              this.dialogFormVisible = false
              this.loadServer()
            }else{
              this.$message({
                message:"保存服务失败!",
                type: "error",
                duration:2000
              })
            }
          }
      ).catch(error=>
          this.$message({
            message:"保存服务失败!"+error.toString(),
            type: "error",
            duration:2000
          })
      )
    },
    seleteServer(name){
      this.$axios.post(
          "/server/delete?name="+name,
      ).then((success)=>{
            if(success.status==200 && success.data){
              this.$message({
                message:"删除服务成功!",
                type: "success",
                duration:2000
              })
              this.dialogFormVisible = false
              this.loadServer()
            }else{
              this.$message({
                message:"删除服务成功!",
                type: "error",
                duration:2000
              })
            }
          }
      ).catch(error=>
          this.$message({
            message:"删除服务成功!"+error.toString(),
            type: "error",
            duration:2000
          })
      )
    },

    closeDialog(save){
      if(!save) {
        this.dialogFormVisible = false
      }else {
        this.$refs["formrel"].validate((valid) => {
          if (valid) {
            this.saveServer()
          } else {
            this.$message({
              message:"存在非法信息！!",
              type: "error",
              duration:2000
            })
          }
        })
      }
    },
    closedDialog(){
      this.$refs["formrel"].resetFields()
      this.$refs["formrel"].clearValidate()
    }
  },
  created() {
    this.loadServer()
  }
}
</script>

<style scoped>
.box-card {
  width: 200px;
  margin: 5px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.card-content {
  font-size: 13px;
  font-weight: bold;
  color: green;
}
</style>